<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <h2 class="text-center  margin-bottom">{{title}}</h2>
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="机构名称">
                            <select-customer-list ref="selectCustomerRef" @change="changeCustomer"></select-customer-list>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="负责人">
                            <a-input v-model="queryParam.leadername" placeholder="负责人"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="负责人电话">
                            <a-input v-model="queryParam.leaderphone" placeholder="负责人电话"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="区域查询">
                            <select-area ref="selectAreaRef" @change="changeArea"></select-area>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24" v-has="'query:company:select:auth'">
                        <a-form-item label="处置单位">
                            <select-company-list :companysId="queryParam.companysId" @change="changeCompany"></select-company-list>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="合同确认">
                            <a-select placeholder="合同确认" v-model="queryParam.isConfirm">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="0">未确认</a-select-option>
                                <a-select-option value="1">已确认</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="8" :sm="24">
                        <a-form-item label="合同类型">
                            <a-select placeholder="合同类型" v-model="queryParam.contractIsType">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="1">新增</a-select-option>
                                <a-select-option value="2">续签</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="8" :sm="24">
                        <a-form-item label="是否审核">
                            <a-select placeholder="是否审核" v-model="queryParam.audit">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="0">待审核</a-select-option>
                                <a-select-option value="1">审核通过</a-select-option>
                                <a-select-option value="2">审核未通过</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="8" :sm="24" v-has="'query:signed:person:select:auth'">
                        <a-form-item label="合同签订人" >
                             <select-cx-salesman-list ref="selectSalesmanRef" v-model="queryParam.signedPersonId" @change="changeSalesman" placeholder="合同签订人姓名"/>
                        </a-form-item>
                    </a-col>

                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="display: flex;justify-content: space-between;align-items: center;">
            <div>
                <a-button type="primary" @click="searchQuery" icon="search">查询数据列表</a-button>
                <a-button type="primary" @click="resetForm">重置查询</a-button>
            </div>
            <div>
                <a-button type="primary" icon="printer" v-print="'#printTableList'">打印</a-button>
            </div>

        </div>
        <!-- table区域-begin -->
        <div>
            <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:true}"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    class="j-table-force-nowrap"
                    @change="handleTableChange">

                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <template slot="imgSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <img v-else :src="getImgView(text)" height="25px" alt=""
                         style="max-width:80px;font-size: 12px;font-style: italic;"/>
                </template>
                <template slot="fileSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                    <a-button
                            v-else
                            :ghost="true"
                            type="primary"
                            icon="download"
                            size="small"
                            @click="downloadFile(text)">
                        下载
                    </a-button>
                </template>

                <span slot="action" slot-scope="text, record">
<!--                    <a-->
<!--                       @click="toPrintPage(record)">登记证</a>-->
<!--                    <a-divider type="vertical"/>-->
                    <a @click="showAudit(record)" v-has="'query:audit:customer:auth'" v-if="record.audit == 0">审核</a>
                    <a-divider v-has="'query:audit:customer:auth'" v-if="record.audit == 0" type="vertical"/>
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a>删除</a>
                    </a-popconfirm>
                </span>

            </a-table>
        </div>

        <cx-contract-modal ref="modalForm" @ok="modalFormOk"></cx-contract-modal>

        <a-modal v-if="editData" v-model="visible"
                 :title="'【'+editData.customerName+'】机构信息审核'"
                 width="80%"
        >
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :sm="12">
                        <a-form-item label="机构名称">
                            <div class="text-white">{{editData.customerName}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12">
                        <a-form-item label="机构编码">
                            <div class="text-white">{{editData.customerNumber || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12">
                        <a-form-item label="负责人姓名">
                            <div class="text-white">{{editData.leadername || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12">
                        <a-form-item label="负责人电话">
                            <div class="text-white">{{editData.leaderphone || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12">
                        <a-form-item label="合同开始时间">
                            <div class="text-white">{{editData.contractStart || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12">
                        <a-form-item label="合同结束时间">
                            <div class="text-white">{{editData.contractEnd || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构所在区域">
                            <div class="text-white">{{editData.province || ''}}{{editData.city || ''}}{{editData.area || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构地址">
                            <div class="text-white">{{editData.address || ''}}</div>
                        </a-form-item>
                    </a-col>

                    <a-col :sm="24">
                        <a-form-item label="审核备注"></a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-textarea style="width: 100%;" v-model="auditRemark" placeholder="审核备注" :rows="4"/>
                    </a-col>

                </a-row>
            </a-form>
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    关闭弹窗
                </a-button>
                <a-button type="primary" :loading="loading" @click="handleOk(1)">
                    审核通过
                </a-button>
                <a-button type="danger" :loading="loading" @click="handleOk(2)">
                    审核未通过
                </a-button>
            </template>
        </a-modal>

        <div v-show="false">
            <div id="printTableList">
                <h2 style="text-align: center;font-weight: bold;">
                    {{title}}
                </h2>
                <a-table
                        size="small"
                        bordered
                        rowKey="id"
                        :columns="printColumns"
                        :dataSource="dataSource"
                        :pagination="false"
                >
                    <template slot="htmlSlot" slot-scope="text">
                        <div style="color: black !important;" v-html="text"></div>
                    </template>
                </a-table>
            </div>
        </div>

        <!--打印客户登记证-->
<!--        <print-customer-data ref="printRef"></print-customer-data>-->

    </a-card>
</template>

<script>

    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import CxContractModal from './modules/CxContractModal'
    import SelectArea from '@/components/Jane/SelectArea'
    import SelectCompanyList from '@/components/Jane/SelectCompanyList'
    import SelectCustomerList from '@/components/Jane/SelectCustomerList'
    import SelectCxSalesmanList from '@/components/Jane/SelectCxSalesmanList'
    import PrintCustomerData from '@jyb_v3/customer/modules/PrintCustomerData'
    import { getAction } from '@/api/manage'

    export default {
        name: 'CxContractList',
        mixins: [JeecgListMixin, mixinDevice],
        components: {
            CxContractModal,
            SelectArea,
            SelectCompanyList,
            SelectCustomerList,
            PrintCustomerData,
            SelectCxSalesmanList,
        },
        data() {
            return {
                title: '已签订合同机构列表',
                // 表头
                printColumns: [],
                queryParam: {
                    customerName: '',
                    leadername: '',
                    leaderphone: '',
                    cityCode: '',
                    areaCode: '',
                    companysId: '',
                    isConfirm: '',
                    contractIsType: '',
                },
                columns: [],
                url: {
                    list: '/hc/hcContract/CXContract',
                    delete: '/hc/hcContract/delete',
                    deleteBatch: '/hc/hcContract/deleteBatch',
                    exportXlsUrl: '/hc/hcContract/exportXls',
                    importExcelUrl: 'hc/hcContract/importExcel'
                },
                dictOptions: {},
                superFieldList: [],
                editData: null,
                visible: false,
                auditRemark: '',
            }
        },
        created() {
            // 获取到用户登陆的信息
            let userInfo = this.$store.getters.userInfo
            if (userInfo.companysId) {
                this.changeCompany(userInfo.companysId)
            }
        },
        computed: {
            importExcelUrl: function() {
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
            }
        },
        methods: {
            // 初始化数据
            initData: function() {
                for (let i in this.queryParam) {
                    this.queryParam[i] = ''
                }
                // 获取到用户登陆的信息
                let userInfo = this.$store.getters.userInfo
                // 如果用户存在区县编码、处置单位Id编号，则赋值
                // if (userInfo.cityCode) {
                //     this.queryParam.cityCode = userInfo.cityCode
                // }
                // if (userInfo.areaCode) {
                //     this.queryParam.cityCode = userInfo.areaCode
                // }
                if (userInfo.companysId) {
                    this.queryParam.companysId = userInfo.companysId;
                }
                let ref = this.$refs.selectAreaRef
                if (ref && ref.clearSelectArea != undefined) {
                    ref.clearSelectArea()
                }
                let refCus = this.$refs.selectCustomerRef;
                if(refCus && refCus.clearSelectCustomer != undefined){
                    refCus.clearSelectCustomer();
                }
                let refSales = this.$refs.selectSalesmanRef;
                if(refSales && refSales.clearSelectSales != undefined){
                    refSales.clearSelectSales();
                }

            },

            // 打印客户溯源信息登记证
            // toPrintPage: function(row) {
            //     let ref = this.$refs.printRef
            //     if (ref) {
            //         ref.creatQrCode(row)
            //     }
            // },

            async initDictConfig() {
                this.initData()
                this.setColumns()
            },
            // 审核机构
            showAudit(row){
                this.visible = true
                this.editData = row
            },
            handleCancel(e) {
                this.visible = false
                this.editData = null
                this.auditRemark = ''
            },
            async handleOk(state = 1) {
                if (state == 2 && this.auditRemark == '') {
                    this.$message.warn('请填写【审核未通过】的原因！')
                    return
                }
                let params = {
                    id: this.editData.id,
                    audit: state,
                    auditRemark: this.auditRemark || ''
                }
                this.loading = true
                let res = await getAction('/hc/hcContract/audit', params)
                if (res && res.success) {
                    this.visible = false
                    this.loading = false
                    this.auditRemark = ''
                    this.$message.success(res.message || '审核信息提交成功！')
                } else {
                    this.$message.warn(res.message || '审核失败！')
                }
                this.loadData()
            },

            setColumns() {
                let columns = [
                    {
                        title: '机构名称',
                        align: 'center',
                        dataIndex: 'customerName'
                    },
                    {
                        title: '联 系 人',
                        align: 'center',
                        dataIndex: 'leadername'
                    },
                    {
                        title: '联系电话',
                        align: 'center',
                        dataIndex: 'leaderphone'
                    },
                    {
                        title: '合同类型',
                        align: 'center',
                        dataIndex: 'contractType'
                    },
                    {
                        title: '开始时间',
                        align: 'center',
                        dataIndex: 'contractStart'
                    },
                    {
                        title: '结束时间',
                        align: 'center',
                        dataIndex: 'contractEnd'
                    },
                    {
                        title: '确认时间',
                        align: 'center',
                        dataIndex: 'confirmTime'
                    },
                    {
                        title: '剩余日期',
                        align: 'center',
                        dataIndex: 'contractEnd',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: function(value, row, index) {
                            const obj = {
                                children: '',
                                attrs: {}
                            }
                            let time1 = new Date(value).getTime();
                            let time2 = new Date().getTime();

                            if (time1 < time2) {
                                let day = parseInt((time2-time1)/ (1000 * 60 * 60 * 24));
                                obj['children'] = <span style="color: orange;" >已过期{day}天</span>;
                            }
                            if (time1 > time2) {
                                let day = parseInt((time1-time2)/ (1000 * 60 * 60 * 24)) + 2;
                                obj['children'] = <span style="color: #4cfbeb;" >剩余{day}天</span>;
                            }
                            return obj
                        }
                    },
                    {
                        title: '机构地址',
                        align: 'center',
                        dataIndex: 'address',
                        customRender: function(t, r, index) {
                            return `${r.province || ''}${r.city || ''}${r.area || ''}`
                        }
                    },
                    {
                        title: '合同确认',
                        align: 'center',
                        dataIndex: 'isConfirm',
                        customRender: function(t, r, index) {
                            if (t == 1) {
                                return<span style = 'color: #e5e5ff;' > 已确认 < /span>
                            }
                            return '未确认'
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        dataIndex: 'audit',
                        customRender: function(t, r, index) {
                            if (t == 0) {
                                return<span > 待审核 < /span>
                            }else if(t == 1){
                                return<span  > 审核已通过 < /span>
                            }else if(t == 2){
                                return<span  > 审核未通过 < /span>
                            }

                        }
                    },
                    {
                        title: '结算方式',
                        align: 'center',
                        dataIndex: 'settlementType',
                        customRender: function(t, r, index) {
                            if (t == 1) {
                                return <span style = 'color: #e5e5ff;' > 私人账户 < /span>
                            } else {
                                return <span style = 'color: orange;' > 对公账户 < /span>
                            }
                            return '-'
                        }
                    },
                    {
                        title: '合同作废',
                        align: 'center',
                        dataIndex: 'cancellation',
                        customRender: function(t, r, index) {
                            if (t == 1) {
                                return<span style = 'color: red;' > 已作废 < /span>
                            } else {
                                return<span style = 'color: #e5e5ff;' > 正常 < /span>
                            }
                            return '-'
                        }
                    }
                ]
                this.columns = [
                    {
                        title: '客户编号',
                        align: 'center',
                        dataIndex: 'customerNumber'
                    },
                    ...columns,
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        width: 147,
                        scopedSlots: { customRender: 'action' }
                    }
                ]
                this.printColumns = [
                    {
                        title: '序号',
                        dataIndex: '',
                        key: 'rowIndex',
                        align: 'center',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        }
                    },
                    ...columns
                ]
            },
            async changeArea({ area, city }) {
                if (city) {
                    this.queryParam.cityCode = city
                }
                if (area) {
                    this.queryParam.areaCode = area
                }
            },

            //重置表单
            resetForm: function() {
                 this.initData();
                 this.searchQuery();
            },
            async changeCustomer(value, option) {
                this.queryParam.customerNumber = value
            },
            async changeCompany(value, option) {
                this.queryParam.companysId = value
            },
            changeSalesman(value, option) {
                this.queryParam.signedPersonId = value
            },
            searchQuery: function() {
                this.loadData(1)
            },
            getSuperFieldList() {
                let fieldList = []
                fieldList.push({ type: 'string', value: 'customerName', text: '客户名称', dictCode: '' })
                fieldList.push({ type: 'string', value: 'leadername', text: '客户领导姓名', dictCode: '' })
                fieldList.push({ type: 'string', value: 'secondphone', text: '第二手机号码', dictCode: '' })
                fieldList.push({ type: 'string', value: 'leaderphone', text: '客户领导电话号码', dictCode: '' })
                fieldList.push({ type: 'string', value: 'address', text: '客户详细地址', dictCode: '' })
                fieldList.push({ type: 'string', value: 'customerNumber', text: '客户编号', dictCode: '' })
                this.superFieldList = fieldList
            }
        }
    }
</script>
<style scoped>
    @import '~@assets/less/common.less';
</style>
